<template>
  <button
    :class="btnSize + ' ' + type + ' ' + plainClass + ' ' + disabledClass"
    :disabled="disabled"
  >
    <slot name="icon"></slot>
    <slot></slot>
    <template v-if="loading">
      <slot name="loading"></slot>
    </template>
  </button>
</template>
<script setup>
import { defineProps, computed, defineExpose } from "vue";
const props = defineProps({
  size: {
    type: String,
    default: "default",
  },
  type: {
    type: String,
    default: "primary",
  },
  plain: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const btnSize = computed(() => {
  return "font" + props.size;
});
const plainClass = computed(() => {
  return "plain" + props.plain;
});
const disabledClass = computed(() => {
  return "disabled" + props.disabled;
});
defineExpose({
  size: props.size,
  type: props.type,
  disabled: props.disabled,
});
</script>
<style scoped>
.fontlarge {
  font-size: 20px;
}
.fontfault {
  font-size: 16px;
}
.fontsmall {
  font-size: 12px;
}
.primary {
  background-color: #409eff;
  color: #fff;
}
.success {
  background-color: #67c23a;
  /* color: #fff; */
}
.warning {
  background-color: #e6a23c;
  /* color: #fff; */
}
.danger {
  background-color: #f56c6c;
  color: #fff;
}
.info {
  background-color: #909399;
  color: #fff;
}
.text {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.plaintrue {
  background: none;
  clear: #000;
}
.disabledtrue {
  background: #bbb;
  color: #000;
}
</style>
